<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { ElTag, ElIcon, ElButton, ElTabs, ElTabPane, ElDivider } from 'element-plus'
import { Cpu, FullScreen } from '@element-plus/icons-vue'
import HistoryLog from '../historyLog.vue'
const portList = ref([
  '21',
  '22',
  '80',
  '111',
  '888',
  '3306',
  '6101',
  '6666',
  '8101',
  '8110',
  '8120',
  '8160',
  '8161',
  '8162',
  '8163',
  '8164',
  '8165',
  '9977',
  '19160',
  '19161',
  '19162',
  '19163',
  '19164',
  '19165',
  '23760',
  '32560',
  '33835',
  '36420',
  '39465',
  '54256',
  '54941',
  '59803'
])
const protocolList = ref(['ftp', 'http', 'mysql', 'rbcbind', 'ssh', 'telnet'])

const protInfo = reactive({
  port: '22',
  protocol: 'tcp/ftp',
  app: 'Pure-FTPd',
  time: '2024/06/25'
})

const isFullScren = ref(false)

const tabInfo = [
  {
    name: 'banner',
    data: `
    Version: 3 (0x2)
    Serial Number:
        01:9e:db:4a:32:77:a3:59:d6:a1:81:69:a0:1a:c5:8c
    Signature Algorithm: sha256WithRSAEncryption
    Issuer: C=US, O=Netflix, Inc., CN=Netflix Public SHA2 RSA CA 3
    Validity
        Not Before: Aug  7 00:00:00 2024 GMT
        Not After : Sep  9 08:59:57 2024 GMT
    Subject: C=US, ST=California, L=Los Gatos, O=Netflix, CN=secure.netflix.com
    Subject Public Key Info:
        Public Key Algorithm: id-ecPublicKey
            Public-Key: (256 bit)
            pub:
                04:7e:67:90:d6:ed:08:44:4a:ee:a6:83:42:32:91:
                99:75:f1:7a:13:9e:c7:4c:42:89:19:c2:46:d1:51:
                e7:96:dd:44:b8:44:65:2b:71:8d:c0:bc:7f:fd:69:
                43:7c:1c:7d:dc:e6:28:09:06:89:20:25:df:32:be:
                49:72:23:ce:cd
            ASN1 OID: prime256v1
            NIST CURVE: P-256
    X509v3 extensions:
        X509v3 Authority Key Identifier:
            7D:D2:A8:9C:D6:11:07:3F:AC:7F:CE:92:B8:3F:27:3B:29:C1:04:BF
        X509v3 Subject Key Identifier:
            64:E8:11:4C:0F:99:07:4B:C3:AB:7E:B6:58:16:12:AD:8D:73:BC:D9
        X509v3 Subject Alternative Name:
            DNS:secure.netflix.com
        X509v3 Certificate Policies:
            Policy: 2.23.140.1.2.2
              CPS: http://www.digicert.com/CPS
        X509v3 Key Usage: critical
            Digital Signature, Key Agreement
        X509v3 Extended Key Usage:
            TLS Web Server Authentication, TLS Web Client Authentication
        Authority Information Access:
            OCSP - URI:http://ocsp.digicert.com
            CA Issuers - URI:http://cacerts.digicert.com/NetflixPublicSHA2RSACA3.crt
        X509v3 Basic Constraints: critical
                CA:FALSE
    Signature Algorithm: sha256WithRSAEncryption
    Signature Value:
        7f:a0:a1:5b:d8:06:cd:85:3f:ef:c5:60:34:30:85:84:3b:fd:
        59:3b:1a:a5:19:14:ef:ee:9e:80:94:87:86:e5:ad:74:c6:80:
        1b:77:7a:65:cc:ab:e2:71:b0:ac:96:b5:93:89:32:5f:d2:8e:
        4b:6a:80:76:16:f4:f2:d7:64:0d:ce:fb:08:13:9f:7a:b3:48:
        42:5b:43:09:37:05:49:f6:ca:bf:25:6f:98:68:1c:1d:59:3a:
        39:cf:b0:35:8e:6a:b4:23:63:10:76:84:02:3f:d2:de:3d:b0:
        49:b3:5e:8f:14:bb:a4:84:f5:ae:e2:f2:b5:98:c4:5d:b8:32:
        b3:6f:01:0a:08:ea:cd:a7:70:54:a7:ca:9f:ef:5d:f9:1a:81:
        dd:7e:44:6b:84:62:87:e9:25:81:5a:fa:3d:06:f5:a7:17:af:
        1d:db:1b:df:93:c8:71:0b:b9:92:dc:65:43:c2:8d:3d:76:82:
        91:78:a1:f3:d2:c4:28:c2:fd:9a:21:1c:7c:62:f9:23:5c:fd:
        86:5f:51:d6:74:d2:d0:9c:cb:11:7b:bb:03:ee:77:aa:51:1a:
        22:0b:02:d4:29:30:77:6c:36:62:45:6d:e6:ec:d5:5e:d6:10:
        e3:b9:b3:58:1d:39:ff:3f:70:1d:05:40:8c:5b:57:4d:8c:2e:
        41:34:76:72`
  }
]

const activeName = ref('')

const page = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 7
})

const xgpt = () => {}

const changeFullscreen = () => {
  isFullScren.value = !isFullScren.value
}

onMounted(() => {
  activeName.value = tabInfo[0].name
})
</script>
<template>
  <div>
    <!-- 开放端口 -->
    <div class="ports">
      <div class="title">{{ `开放端口（${portList.length}）` }}</div>
      <div class="list">
        <el-tag class="tags" type="primary" v-for="(item, index) in portList" :key="index">
          <div class="flex-items">
            <el-icon><Cpu /></el-icon>
            <span>{{ item }}</span>
          </div>
        </el-tag>
      </div>
    </div>
    <!-- 协议 -->
    <div class="protocol">
      <div class="title">{{ `协议（${protocolList.length}）` }}</div>
      <div class="list">
        <el-tag class="tags" type="primary" v-for="(item, index) in protocolList" :key="index">
          <span>{{ item }}</span>
        </el-tag>
      </div>
    </div>
    <!-- 端口详情 -->
    <div class="ports-infos">
      <div class="title">端口详情</div>
      <div class="info-con">
        <div class="left">
          <div class="tags">
            <el-tag class="tags" type="info">
              <div class="flex-items">
                <el-icon><Cpu /></el-icon>
                <span>{{ protInfo.port }}</span>
              </div>
            </el-tag>
            <el-tag class="tags" type="info">{{ protInfo.protocol }}</el-tag>
          </div>
          <div class="xgpt">
            <div class="app">
              <span class="label">应用：</span>
              <span>{{ protInfo.app }}</span>
              <el-button @click="xgpt" round size="small" class="xgpt-btn">XGPT解读</el-button>
            </div>
            <div class="time">
              <span class="label">末次发现时间：</span>
              <span>{{ protInfo.time }}</span>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="view">
            <div
              class="fullScreenIcon"
              :class="{ fullScreen: isFullScren }"
              @click="changeFullscreen"
            >
              <el-icon><FullScreen /></el-icon>
            </div>
            <el-tabs v-model="activeName">
              <el-tab-pane
                :label="item.name"
                :name="item.name"
                v-for="(item, index) in tabInfo"
                :key="index"
              >
                <pre class="view-con">
                  <el-button @click="xgpt" round size="small" class="view-btn">XGPT解读</el-button>
                  {{ item.data }}
                </pre>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
      <jmp-pagination
        v-model:page="page.pageNum"
        v-model:limit="page.pageSize"
        v-model:total="page.total"
      />
    </div>
    <!-- 历史变更 -->
    <div class="history">
      <div class="header flex-items">
        <div class="title">历史变更</div>
        <div class="desc">6个月历史资产测绘数据变更</div>
      </div>
      <el-divider />
      <HistoryLog />
    </div>
  </div>
</template>
<style scoped lang="scss">
.flex-items {
  display: flex;
  align-items: center;
}
.ports,
.protocol,
.ports-infos,
.history {
  &:nth-child(n + 2) {
    margin-top: 1.25rem;
  }
  .title {
    font-weight: 700;
  }
  .tags {
    margin-top: 0.625rem;
    margin-right: 1.25rem;
  }
  .desc {
    margin-left: 1.25rem;
  }
}
.info-con {
  height: 17.5rem;
  display: flex;
  .left {
    width: 20%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .xgpt {
      flex: 1;
      padding: 1.25rem;
      margin-top: 0.625rem;
      background-color: var(--el-color-info-light-9);
      color: var(--el-text-color-regular);
      .app {
        margin-bottom: 1.25rem;
        .xgpt-btn {
          margin-left: 0.625rem;
        }
      }
      .label {
        display: inline-block;
        width: 7.5rem;
      }
    }
  }
  .right {
    width: 45%;
    margin-left: 0.625rem;
    .view {
      position: relative;
      height: 100%;
      border: var(--el-border);
      border-radius: 0.3125rem;
      .fullScreenIcon {
        position: absolute;
        top: 0.625rem;
        right: 0.625rem;
        cursor: pointer;
      }
      .view-con {
        height: 100%;
        overflow-y: auto;
        &::-webkit-scrollbar-track-piece {
          background-color: var(--el-fill-color-blank);
        }
        &::-webkit-scrollbar {
          width: 0.375rem;
          width: 0.375rem;
        }
        &::-webkit-scrollbar-thumb {
          border-radius: 1.25rem;
          background-color: var(--el-text-color-disabled);
        }
        .view-btn {
          position: absolute;
          top: 0%;
          right: 1.25rem;
        }
      }
    }
  }
}
:deep(.el-tabs.el-tabs--top) {
  height: 100%;
  .el-tabs__content {
    height: calc(100% - 3.4375rem);
    .el-tab-pane {
      height: 100%;
    }
  }
  .el-tabs__header {
    .el-tabs__nav-wrap {
      padding: 0 0.625rem;
    }
  }
}
</style>
